<template>
    <Page>
        <div class="search">
            <el-form :inline="true" :model="params" class="demo-form-inline">
                <el-form-item label="申请日期">
                    <el-date-picker
                        v-model="applyDate"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        size="small"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        @change="changeApplyDate"
                        style="width:250px;"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="" style="width:280px;">
                    <el-col :span="11">
                        <el-input v-model="params.amountMin" placeholder="支付金额最小值" size="small"></el-input>
                    </el-col>
                    <el-col class="line" :span="2" style="text-align:center;">-</el-col>
                    <el-col :span="11">
                        <el-input v-model="params.amountMax" placeholder="支付金额最大值" size="small"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item style="width:150px;">
                    <el-input v-model="params.mchParam" placeholder="经销商ID / 名称" size="small"></el-input>
                </el-form-item>
                <el-form-item style="width:150px;">
                    <el-select v-model="params.frpCode" size="small" :clearable="true" placeholder="请选择支付方式">
                        <el-option v-for="item in frpCodeList"
                            :key="item.label"
                            :label="item.title"
                            :value="item.label">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="width:150px;">
                    <el-input v-model="params.trxNo" placeholder="请输入支付流水号" size="small"></el-input>
                </el-form-item>
                <el-form-item label="" style="width:150px;">
                    <el-input v-model="params.userParam" placeholder="客户名称/手机号" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="searchData">查询</el-button>
                    <el-button type="primary" size="small" plain @click="resetSearch">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="datalist">
            <div class="table-header"></div>
            <div class="table-list">
                <el-table
                    :data="listData.list"
                    stripe
                    style="width:100%"
                    width="100%"
                    :highlight-current-row="false"
                    size="small"
                    :header-cell-style="{background:'#FAFAFA',color:'#666', fontSize:'13px'}"
                >
                    <el-table-column prop="trxNo" label="支付流水号" align="center"></el-table-column>
                    <el-table-column prop="userInfo" label="付款客户信息" align="center"></el-table-column>
                    <el-table-column prop="mchName" label="经销商" align="center"></el-table-column>
                    <el-table-column prop="totalAmount" label="应付金额（元）" align="center"></el-table-column>
                    <el-table-column prop="couponPrice" label="优惠券" align="center"></el-table-column>
                    <el-table-column prop="amount" label="实付金额（元）" align="center"></el-table-column>
                    <el-table-column prop="fee" label="手续费" align="center"></el-table-column>
                    <el-table-column prop="profit" label="实际到账（元）" align="center"></el-table-column>
                    <el-table-column prop="frpCode" label="支付渠道" align="center">
                        <template slot-scope="scope">
                            <span>{{scope.row.frpCode|payTypeToName(frpCodeList)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="payTime" label="付款时间" align="center"></el-table-column>
                </el-table>
                <div class="list-paginate">
                    <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="params.currPage"
                        :page-size="params.pageSize"
                        :total="listData.totalCount"
                        @current-change="changePage"
                    ></el-pagination>
                </div>
            </div>
        </div>
    </Page>
</template>
<script>
import Page from "@/components/page/Page";
export default {
    data(){
        return {
            form:{},
            params:{
                dateBegin:null,     // 开始日期
                dateEnd:null,       // 结束日期
                amountMin:null,     // 支付金额
                amountMax:null,     // 支付金额
                mchParam:null,      // 经销商
                frpCode:null,       // 支付方式
                trxNo:null,         // 支付流水号
                userParam:null,     // 客户名称/手机号
                currPage:1,
                pageSize:15,
            },
            listData:{
                currPage: 0,
                list: [],
                pageSize: 0,
                totalCount: 0,
                totalPage: 0,
            },
            applyDate:[],
            frpCodeList:[
                //{title:'微信APP', label:'WEIXIN_APP'},
                {title:'微信小程序', label:'WEIXIN_XCX'},
                {title:'支付宝APP', label:'ALIPAY_APP'},
                {title:'支付宝H5', label:'ALIPAY_H5'},
            ],
        }
    },
    mounted() {
        this.initData();
    },
    methods:{
        // 初始化数据
        initData(){
            this.$http.get('/api/altmch/payList', {params:this.params}).then(result => {
                if(result.code == 200){
                    this.listData = result.data;
                }else{
                    this.$message.error(result.msg);
                }
            });
        },
        // 申请日期
        changeApplyDate(e){
            this.applyDate = e;
            const [dateBegin, dateEnd] = e;
            this.params.dateBegin = dateBegin;
            this.params.dateEnd = dateEnd;
        },
        // 查询
        searchData(e){
            this.params.currPage = 1;
            this.initData();
        },
        // 重置查询
        resetSearch(){
            ['dateBegin','dateEnd','amountMin','amountMax','mchParam','payType','trxNo','userParam'].forEach((item, index) => {
                this.params[item] = null;
            });
            this.applyDate = [];
            this.searchData();
        },
        // 分页点击
        changePage(e){
            this.params.currPage = e;
            this.initData();
        },
    },
    filters:{
        // 转换支付名称
        payTypeToName(payCode, payList){
            let payCodeName = '-';
            payList.forEach(item => {
                if(item.label == payCode){
                    payCodeName = item.title
                }
            });
            return payCodeName;
        },
    },
    components:{
        Page,
    }
}
</script>
<style lang="less" scoped>
    .page{

    }
</style>
